<template>
    <div class="tab-list">
        <div
            class="tab-list__item"
            :class="{
                active: item[props.valueName] == props.active,
            }"
            v-for="item in props.list"
            :key="item[props.valueName]"
            @click="onClick(item)"
        >
            {{ item[props.labelName] }}
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    active: {
        type: Number,
        default: 0,
    },
    list: {
        type: Array,
        default: () => [],
    },
    labelName: {
        type: String,
        default: "label",
    },
    valueName: {
        type: String,
        default: "value",
    },
});

const emits = defineEmits(["update:active", "change"]);

const onClick = (item) => {
    emits("update:active", item[props.valueName]);
    emits("change", item[props.valueName]);
};
</script>
<style lang="scss" scoped>
.tab-list {
    position: relative;
    display: flex;
    width: 345px;
    margin: 0 15px;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #5085fb;
        opacity: 0.2;
    }

    &__item {
        position: relative;
        font-size: 14px;
        color: #666;
        flex: 1;
        text-align: center;
        padding: 10px 0;

        &.active {
            font-weight: 500;
            color: #5085fb;

            &::after {
                content: "";
                position: relative;
                left: 50%;
                bottom: -10px;
                display: block;
                width: 40px;
                height: 1px;
                background-color: #5085fb;
                transform: translateX(-50%);
            }
        }
    }
}
</style>
